<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--@elvariable id="contextPath" type="java.lang.String"--%>
<%--@elvariable id="profile" type="org.parademo.web.model.UserProfileView"--%>
<%--@elvariable id="profile" type="org.parademo.web.model.Address"--%>
<%--@elvariable id="countries" type="java.util.List<org.parademo.model.CountryEntity>"--%>

<html>
<head>
    <link rel="stylesheet" href="${contextPath}/static/jquery-ui-1.8.10/css/smoothness/jquery-ui-1.8.10.custom.css" />

    <script type="text/javascript" src="${contextPath}/static/jquery/jquery-1.5.1.js"></script>
    <script type="text/javascript" src="${contextPath}/static/jquery-ui-1.8.10/development-bundle/ui/jquery-ui-1.8.10.custom.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#birthDate").datepicker({
                dateFormat: 'dd-mm-yy',
                appendText: ' (dd-mm-yy)',
                gotoCurrent: true,
                changeMonth: true,
                changeYear: true,
                buttonImageOnly: true,
                minDate: new Date()
            });
          });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#joinDate").datepicker({
                dateFormat: 'dd-mm-yy',
                appendText: ' (dd-mm-yy)',
                gotoCurrent: true,
                changeMonth: true,
                changeYear: true,
                buttonImageOnly: true,
                minDate: new Date()
            });
          });
    </script>

    <script language="javascript" type="text/javascript">
        function cancel() {
            document.getElementById("userDetailForm").action = window.back();
        }
    </script>

</head>
<body>
<div class="profile">
<h1>User Details</h1>

<form:form action="${contextPath}/profile" method="POST" commandName="userProfile" class="userDetailForm" id="userDetailForm" >

<%-- send these back to the server, because we need them in the service to know what entity to update --%>
<form:hidden path="userId"/>
<form:hidden path="userName"/>
<form:hidden path="addressId"/>

<table>
    <tr>
        <td>
            <label for="userName">UserName</label>
        </td>
        <td>
            <span id="userName">${userProfile.userName}</span>
        </td>
    </tr>
    <tr>
        <td>
            <label for="firstName">First Name</label>
        </td>
        <td>
            <form:input path="firstName" id="firstName" />
            <form:errors path="firstName" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="lastName">Last Name</label>
        </td>
        <td>
            <form:input path="lastName" id="lastName" />
            <form:errors path="lastName" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="birthDate">Birth Date</label>
        </td>
        <td>
            <form:input path="birthDate" id="birthDate" />
            <form:errors path="birthDate" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="joinDate">Join Date</label>
        </td>
        <td>
            <form:input path="joinDate" id="joinDate" />
            <form:errors path="joinDate" />
        </td>
    </tr>
</table>

<!-- address -->
<h2>Address</h2>

<table>
<tr>
    <td>
        <label for="addressStreetName">Street Name</label>
    </td>
    <td>
        <form:input path="addressStreetName" id="addressStreetName" />
        <form:errors path="addressStreetName" />
    </td>
</tr>
<tr>
    <td>
        <label for="addressHouseNumber">House Number</label>
    </td>
    <td>
        <form:input path="addressHouseNumber" id="addressHouseNumber" />
        <form:errors path="addressHouseNumber" />
    </td>
</tr>
<tr>
    <td>
        <label for="addressZipCode">Zip Code</label>
    </td>
    <td>
        <form:input path="addressZipCode" id="addressZipCode" />
        <form:errors path="addressZipCode" />
    </td>
</tr>
<tr>
    <td>
        <label for="addressCity">City</label>
    </td>
    <td>
        <form:input path="addressCity" id="addressCity" />
        <form:errors path="addressCity" />
    </td>
</tr>
<tr>
<td>
    <label for="countries">Country</label>
</td>
<td>
    <form:select id="countries" path="addressCountryId">
        <form:option value="no_country" label="--Select Country--"/>
        <form:options items="${countries}" itemLabel="countryName" itemValue="id"/>
    </form:select>
    <form:errors path="addressCountryId" />
</td>
</tr>
</table>
<div align="center">
    <a class="medium black button" href="javascript:" onclick="document.getElementById('userDetailForm').submit();">Save</a>
    <a class="medium red button" href="javascript:" onclick="cancel()">Cancel</a>
</div>
</form:form>
</div>
</body>
</html>